import React, { PureComponent, Fragment } from 'react';
import moment from 'moment/moment';
import {
  Form,
  Input,
  Select,
  Button,
  Drawer,
  Radio,
} from 'antd';


const FormItem = Form.Item;
const { TextArea } = Input;
const { Option } = Select;
const dateFormat = 'YYYY-MM-DD';

const RadioGroup = Radio.Group;

//更新和新增用户信息   modalVisible

@Form.create()
class UpdateForm extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      listData: {
        realName: '',
      },
    };

    this.formLayout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 13 },
    };
  }

  // 表单
  renderContent = () => {
    const { form, selectedRows={} } = this.props;
    return Object.keys(selectedRows).length>0?[
      <FormItem key="deptName" {...this.formLayout} label="金额">
        {form.getFieldDecorator('amount', {
          rules: [{ required: true, message: '请输入金额！' }],
          initialValue: selectedRows.amount.indexOf(',') !== -1 ? selectedRows.amount.replace(',', '') : Number(selectedRows.amount),
        })(<Input type={'Number'} placeholder="请输入金额"/>)}
      </FormItem>,
    ]:''
  };

  //弹窗
  render() {
    const { handleModalVisible, modalVisible, handleAdd, typeModalVisible } = this.props;
    //完成
    const handleNext = () => {
      const { form, values } = this.props;
      form.validateFields((err, fieldsValue) => {
        if (err) return;
        const formVals = { ...values, ...fieldsValue };
        handleAdd(typeModalVisible,formVals);
      });
    };
    return (
      <Drawer
        width={500}
        bodyStyle={{ padding: '32px 40px 48px' }}
        destroyOnClose
        title={typeModalVisible ? '还款金额' : '充值金额'}
        visible={modalVisible}
        onOk={handleNext}
        onClose={() => handleModalVisible(false, [])}
      >
        {this.renderContent()}
        <div
          style={{
            position: 'absolute',
            left: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'right',
          }}
        >
          <Button onClick={()=>handleModalVisible(false, [])} style={{ marginRight: 8 }}>
            取消
          </Button>
          <Button onClick={handleNext} type="primary">
            提交
          </Button>
        </div>
      </Drawer>
    );
  }
}

export default UpdateForm;
